<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangjie
 * @Date: 2021-01-27 11:56:55
 * @LastEditors: 杨镜
 * @LastEditTime: 2023-01-03 11:21:06
-->


<template>
  <div class="app-container">
    <h4>充值明细</h4>
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="tradeType">
        <el-select v-model="list.filter.tradeType" placeholder="类型" clearable>
          <el-option v-for="(o, i) in typeCollector.typeOfIntegral" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>
    <el-form-item prop="endTime">
      <TimeRangePicker
        :start.sync="list.filter.startTime"
        :end.sync="list.filter.endTime"
        placeholder="开始时间/结束时间"
      />
    </el-form-item>
      <el-form-item prop="reason">
        <el-select v-model="list.filter.reason" placeholder="原因" clearable>
          <el-option v-for="(o, i) in typeCollector.sourceOfRecharge" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  

    <div class="table-operation">
      <span>累计充值：{{ this.$attrs.totalRecharge / 100 }}</span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="交易类型" prop="tradeTypeName"/>
      <el-table-column label="金额" prop="tradeAmount">
        <template slot-scope="{row}">
          {{ row.tradeAmount / 100 }}
        </template>
      </el-table-column>
      <el-table-column label="原因" prop="reasonName"/>
      <el-table-column label="时间" prop="createTime"/>
      <el-table-column label="当前余额" prop="currentAmount">
        <template slot-scope="{row}">
          {{ row.currentAmount / 100 }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
let self = null
export default {
  mixins: [pageMixin],
  computed: {
    ...mapGetters([
      'typeCollector'
    ])
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/vip/vip-account-flow',
    getListProxy (getList) {
      setTimeout(() => {
        if (self && self.$attrs ) {
          self.list.filter.userId = self.$attrs.id
          getList()
        }
      }, 100);
    },
    list: {
      filter: {
        userId: ""
      }
    }
  }),
  data() {
    return {
    }
  },
  created () {
    self = this
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
</style>

